<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: left;
            text-decoration:overline;
        }
        h2{
            text-align: center;
        }
        h3{
            text-align: right;
        }
        p
        {
            /* 首行缩进 */
         text-indent: 2em;
         text-decoration: underline;
         line-height:20;
        }

        a{
            /* 取消掉跳转下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>我爱的人</h1>
    <h2>不是我的爱人</h2>
    <h3>从他们的眼神</h3>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente accusantium esse earum inventore placeat aliquid maxime error harum fuga commodi. Quam architecto consequuntur quia rem ipsum distinctio amet corrupti dolorum!
    </p>
    <a href="#">不跳转</a>
</body>
</html>
< !DOCTYPE html >
<html lang = "en">

<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>新浪网< / title>
<style>
*{
	margin : 0;
}

.one{
	border - top: 3px solid #ff8500;
	border - bottom: 1px solid #edeef0;
	height: 41px;
	line - height: 41px;
}

a{
	display: inline - block;
	height: 41px;
	font - size: 12px;
	color: #4c4c4c;
	text - decoration: none;
	padding: 0 20px;
}

a:hover{
	background - color: #eee;
	color: #ff8500;
}

.two{
	margin - left: 250px;
	display: inline - block;
}

.three{
	margin - left: 300px;
	display: inline - block;
}

.four{
	width: 200px;
	height: 250px;
	border - left: 1px solid gray;
	border - right: 1px solid gray;
	border - bottom: 1px solid gray;
	margin - left: 20px;
}

h3{
	border - top: 3px solid #ff8500;
	border - bottom: 1px solid gray;
	font - weight: 400;
	height: 30px;
	line - height: 30px;
	padding - left: 20px;
}

img{
	margin: 15px 25px;
}

.four ul li{
	font - size: 12px;
	color: black;
	list - style: none;
	background: url(images / bg2.png) no - repeat left;
	padding - left: 10px;
}

.four ul{
	padding - left: 23px;
}
< / style>
< / head>

<body>
<div class = "one">
<div class = "two">
<a href = "#">设为首页< / a>
<a href = "#">手机新浪网< / a>
<a href = "#">移动客户端< / a>
< / div>
<div class = "three">
<a href = "#">登录< / a>
<a href = "#">微博< / a>
<a href = "#">博客< / a>
<a href = "#">邮箱< / a>
<a href = "#">网站导航< / a>
< / div>
< / div>
<div class = "four">
<h3>搜索趣图< / h3>
<img src = "images/bg1.jpg" alt = "趣图">
<ul>
<li>英特尔新处理器发布< / li>
<li>英特尔新处理器发布< / li>
<li>英特尔新处理器发布< / li>
< / ul>
< / div>
< / body>

< / html>
